<template>
  <div>
    <!-- 再dom里使用ref定义的值的时候，不用.value，dom会自动给你加上 -->
    <div>{{ name }}</div>
    <button @click="changeName">改变名字</button>
    <div>menu1的内容</div>
    <div>{{ menu1 }}</div>
    <button @click="changeMenu1">加菜</button>
    <!-- reactive的使用 -->
    <div>reactive的使用</div>
    <div>{{ menu }}</div>
    <button @click="changeMenu">加菜</button>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
// 使用ref来定义双向绑定的数据，只需要执行ref方法，如果有默认值的话，传入默认值即可
let name = ref("小明");
// let name = {value:"小明"}
const changeName = () => {
  // 当需要改变用ref来定义的值的时候，一定要更改这个值下面的value属性
  name.value = "小红";
  console.log(name);
};

const menu1 = ref(["宫保鸡丁"]);
const changeMenu1 = () => {
  menu1.value.push("辣子鸡丁");
};

// reactive的使用
// reactive只能定义复杂类型的数据（比如对象、比如数组）
let menu = reactive(["宫保鸡丁"]);
const changeMenu = () => {
  menu.push("辣子鸡丁");
};
</script>
<style></style>
